import React, { useState, useEffect } from "react";
import { View, StyleSheet, Dimensions, Text, Image, TouchableOpacity } from "react-native";
import { Button } from "@rneui/themed";
import { useSelector } from "react-redux";
import LinearGradinet from 'react-native-linear-gradient';
import IconNavBar from '@/components/IconNavBar'
import { sectokenCommonCenterProps } from '@/config/navigatorProps'
import ResultImg from '@/assets/safe/result.png'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SectokenSendResult = (props) => {

    const [executeSource, setExecuteSource] = useState(false);
    const [txId, setTxId] = useState('');
    const [isRejection, setIsRejection] = useState(false);
    const transcationDetail = useSelector((state) => state.sectokenMainReducer.transcationDetail || {});
    const sendData = useSelector((state) => state.sectokenMainReducer.sendData || {});

    useEffect(() => {
        let params = props.route.params
        if (params) {
            setExecuteSource(params.source === 'send-execute' ? true : false)
            setTxId(params.txId)
            setIsRejection(params.isRejection)
        }
    }, [props])

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    const handlePressDetail = () => {
        let id = txId ? txId : transcationDetail.txId
        if (isRejection) {
            props.navigation.navigate({
                name: 'safe-rejection-detail',
                params: {
                    source: 'send-result',
                    txId: id
                }
            })
        } else {
            props.navigation.navigate({
                name: 'safe-general-detail',
                params: {
                    source: 'send-result',
                    txId: id
                }
            })
        }
    }

    const handlePressDone = () => {
        props.navigation.navigate({
            name: 'safe-main',
            params: {
                load: true
            }
        })
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} {...sectokenCommonCenterProps} handlePressLeft={handlePressLeft} />
            <View style={{ flex: 6, alignItems: 'center', justifyContent: 'center' }}>
                <Image source={ResultImg} style={styles.img} />
                <Text style={{ ...styles.title1, marginTop: 24 * ratio }}>
                    {executeSource ? 'Your transaction is queued' : 'Your transaction is submitted!'}
                </Text>
                <Text style={{ ...styles.title2, width: 287 * ratio, marginTop: 12 * ratio }}>
                    {!executeSource ? `Your request to send ${sendData.amount} ${sendData.coinType} is submitted
                    and needs to be confirmed by other owners.` :
                        'It normally takes some time for a transaction to be exected.'}
                </Text>
            </View>
            <View style={{ flex: 4, alignItems: 'center' }}>
                {!executeSource && <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center', marginBottom: 12 * ratio }}>
                    <TouchableOpacity onPress={handlePressDetail}>
                        <LinearGradinet colors={['#0EBBF8', '#0069F6']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.button}>
                            <Text style={{ ...styles.title1, color: '#FFFFFF', textAlign: 'center' }}>View details</Text>
                        </LinearGradinet>
                    </TouchableOpacity>
                </View>}
                {executeSource ? <TouchableOpacity onPress={handlePressDetail}>
                    <LinearGradinet colors={['#0EBBF8', '#0069F6']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.button}>
                        <Text style={{ ...styles.title1, color: '#FFFFFF', textAlign: 'center' }}>View transaction details</Text>
                    </LinearGradinet>
                </TouchableOpacity> : <Button buttonStyle={{ ...styles.button, marginBottom: 24 * ratio }} onPress={handlePressDone} color='#F4F4F4'>
                    <Text>DONE</Text>
                </Button>}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF'
    },
    img: {
        width: 82 * ratio,
        height: 82 * ratio
    },
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 24
    },
    title2: {
        fontSize: 14,
        fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
        fontWeight: '400',
        color: '#2C2C2C',
        lineHeight: 20
    },
    button: {
        width: 310 * ratio,
        height: 50,
        borderRadius: 28,
        justifyContent: 'center'
    }
})
export default SectokenSendResult